<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { useRoute } from 'vue-router'
import { usePageInfoStore } from '@/stores'
import { getEngineerProfileApi, getChartApi, getFirstLevelInfoApi } from '@/api/huaxiang'
import { timeFormat } from '@/utils/publicMethods'
import detailsBox from './components/details.vue'
import iconImage from '@/assets/images/icon-ability_1.png'

const route = useRoute()
const stores = usePageInfoStore()
const monthInfo = ref<any>(timeFormat(new Date()).firstDayOfMonth)
const monthChange = (val: any) => {
  // console.log(timeFormat(val).YYYYMM)
  monthInfo.value = val
  scoreEcharts.value.dispose()
  getScoreEchart()
  getZongHeData()
}

const userInfo = ref<any>({})

const isShow = ref(false)
const fromInfo = ref<any>({
  realName: '',
  loginName: '',
  areaName: '',
  fId: '',
  title: ''
})
const getUserInfo = async () => {
  const params = {
    sqlId: 'engineerProfile.getEngineerProfile',
    sqlParam: JSON.stringify({
      id: route.query.userId || stores.huaxiangInfo?.userId
    }),
    pagination: false,
    dbName: 'doris',
    debug: 0,
    type: 'string'
  }
  await getEngineerProfileApi(params).then((res: any) => {
    // console.log(res)
    userInfo.value = res.rows[0]
    fromInfo.value.realName = userInfo.value.realName
    fromInfo.value.loginName = userInfo.value.loginName
    fromInfo.value.areaName = userInfo.value.areaName
  })
}

const btnColor = ref(true)
const cgtabInfo = ref({
  title: '综合得分',
  scoreConst: 0,
  salaryConst: 0
})
// 雷达图
const compareByName = (a: any, b: any) => {
  let names = ['交付能力', '学习能力', '随销能力', '主动维护能力', '保障能力']
  let indexA = names.indexOf(a.fName)
  let indexB = names.indexOf(b.fName)
  return indexA - indexB
}
const scoreShow = ref(false)
const scoreArry = ref<any>([])
const scoreEcharts = ref<any>()
const scoreEchartsRef = ref<HTMLElement>()
const getScoreEchart = async () => {
  const params = {
    sqlId: 'engineerProfile.getChart',
    sqlParam: JSON.stringify({
      uId: route.query.userId || stores.huaxiangInfo?.userId,
      // createTime: '2024-09'
      createTime: timeFormat(monthInfo.value).YYYYMM
    }),
    pagination: false,
    dbName: 'doris',
    debug: 0,
    page: 1,
    rows: 2
  }
  getChartApi(params).then((res: any) => {
    scoreArry.value = []
    res.rows.sort(compareByName)
    res.rows.forEach((item: any) => {
      scoreArry.value.push(item.weightedScore)
    })
    // console.log(scoreArry.value)
    if (scoreArry.value.length > 0) {
      scoreShow.value = true
      nextTick(() => {
        initScoreEcharts(scoreArry.value)
      })
    } else {
      scoreShow.value = false
    }
  })
}
const initScoreEcharts = (arry: any) => {
  scoreEcharts.value = echarts.init(scoreEchartsRef.value as HTMLElement)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '交付能力(35分)', min: 0, max: 35 },
        { name: '学习能力(10分)', min: 0, max: 10 },
        { name: '随销能力(10分)', min: 0, max: 10 },
        { name: '主动维护能力(10分)', min: 0, max: 10 },
        { name: '保障能力(35分)', min: 0, max: 35 }
      ],
      axisName: {
        //修改indicator文字的颜色
        color: '#000000'
      }
    },
    series: [
      {
        name: '综合得分',
        type: 'radar',
        tooltip: {
          trigger: 'item'
        },
        areaStyle: {},
        data: [
          {
            value: arry,
            name: '综合得分'
          }
        ]
      }
    ]
  }
  scoreEcharts.value.setOption(option)
  cgtabInfo.value.scoreConst = 1
}

// 饼状图
// const salaryEcharts = ref<any>()
// const salaryEchartsRef = ref<HTMLElement>()
// const initSalaryEcharts = () => {
//   salaryEcharts.value = echarts.init(salaryEchartsRef.value as HTMLElement)
//   const option = {
//     tooltip: {
//       trigger: 'item'
//     },
//     series: [
//       {
//         name: 'Access From',
//         type: 'pie',
//         radius: ['40%', '70%'],
//         avoidLabelOverlap: false,
//         itemStyle: {
//           borderRadius: 10,
//           borderColor: '#fff',
//           borderWidth: 2
//         },
//         label: {
//           show: false,
//           position: 'center'
//         },
//         emphasis: {
//           label: {
//             show: true,
//             fontSize: 40,
//             fontWeight: 'bold'
//           }
//         },
//         labelLine: {
//           show: false
//         },
//         data: [
//           { value: 1048, name: 'Search Engine' },
//           { value: 735, name: 'Direct' },
//           { value: 580, name: 'Email' },
//           { value: 484, name: 'Union Ads' },
//           { value: 300, name: 'Video Ads' }
//         ]
//       }
//     ]
//   }
//   salaryEcharts.value.setOption(option)
//   cgtabInfo.value.salaryConst = 1
// }

const cgtabBtn = (val: string) => {
  if (val === '综合得分') {
    btnColor.value = true
    cgtabInfo.value.title = val
    if (scoreShow.value) {
      if (cgtabInfo.value.scoreConst !== 0) {
        scoreEcharts.value.dispose()
      }
      nextTick(() => {
        initScoreEcharts(scoreArry.value)
      })
    }
  } else {
    // if (cgtabInfo.value.salaryConst !== 0) {
    //   salaryEcharts.value.dispose()
    // }
    // nextTick(() => {
    //   initSalaryEcharts()
    // })
    cgtabInfo.value.title = val
    btnColor.value = false
  }
}

// '交付能力', '学习能力', '随销能力', '主动维护能力', '保障能力'
// 交付能力
const jiaofuData = ref<any>()
const jiaofuBox = ref('交付能力')
const jiaofuShow = ref(true)
const jiaofuEcharts = ref<any>()
const jiaofuEchartsRef = ref<HTMLElement>()
const initJiaofuEcharts = () => {
  jiaofuEcharts.value = echarts.init(jiaofuEchartsRef.value as HTMLElement)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '20px',
      left: '35px',
      right: '20px'
    },
    xAxis: [
      {
        type: 'category',
        data: baozhangData.value[0].secondLevelInfo.map((item: any) => item.sName),
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          show: true,
          interval: 0,
          formatter: function (value: any) {
            var ret = '' //拼接加\n返回的类目项
            var maxLength = 6 //每项显示文字个数
            var valLength = value.length //X轴类目项的文字个数
            var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
            if (rowN > 1) {
              //如果类目项的文字大于5,
              for (var i = 0; i < rowN; i++) {
                var temp = '' //每次截取的字符串
                var start = i * maxLength //开始截取的位置
                var end = start + maxLength //结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + '\n'
                ret += temp //凭借最终的字符串
              }
              return ret
            } else {
              return value
            }
          },
          color: '#999'
        }
      }
    ],
    yAxis: {
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        formatter: '{value}分',
        color: '#999'
      }
    },
    series: [
      {
        name: '分值',
        type: 'bar',
        showBackground: true,
        barWidth: '20%',
        tooltip: {
          trigger: 'item'
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' }
            ])
          }
        },
        data: jiaofuData.value[0].secondLevelInfo.map((item: any) => Number(item.sScore))
      }
    ]
  }
  jiaofuEcharts.value.setOption(option)
}
// 保障能力
const baozhangData = ref<any>()
const baozhangBox = ref('保障能力')
const baozhangShow = ref(true)
const baozhangEcharts = ref<any>()
const baozhangEchartsRef = ref<HTMLElement>()
const initBaozhangEcharts = () => {
  baozhangEcharts.value = echarts.init(baozhangEchartsRef.value as HTMLElement)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '20px',
      left: '35px',
      right: '20px'
    },
    xAxis: [
      {
        type: 'category',
        data: baozhangData.value[0].secondLevelInfo.map((item: any) => item.sName),
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          show: true,
          interval: 0,
          formatter: function (value: any) {
            var ret = '' //拼接加\n返回的类目项
            var maxLength = 6 //每项显示文字个数
            var valLength = value.length //X轴类目项的文字个数
            var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
            if (rowN > 1) {
              //如果类目项的文字大于5,
              for (var i = 0; i < rowN; i++) {
                var temp = '' //每次截取的字符串
                var start = i * maxLength //开始截取的位置
                var end = start + maxLength //结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + '\n'
                ret += temp //凭借最终的字符串
              }
              return ret
            } else {
              return value
            }
          },
          color: '#999'
        }
      }
    ],
    yAxis: {
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        formatter: '{value}分',
        color: '#999'
      }
    },
    series: [
      {
        name: '分值',
        type: 'bar',
        showBackground: true,
        barWidth: '20%',
        tooltip: {
          trigger: 'item'
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' }
            ])
          }
        },
        data: baozhangData.value[0].secondLevelInfo.map((item: any) => Number(item.sScore))
      }
    ]
  }
  baozhangEcharts.value.setOption(option)
}
// 主动维护能力
const zhudongData = ref<any>()
const zhudongBox = ref('主动维护能力')
const zhudongShow = ref(true)
const zhudongEcharts = ref<any>()
const zhudongEchartsRef = ref<HTMLElement>()
const initZhudongEcharts = () => {
  zhudongEcharts.value = echarts.init(zhudongEchartsRef.value as HTMLElement)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '20px',
      left: '35px',
      right: '20px'
    },
    xAxis: [
      {
        type: 'category',
        data: zhudongData.value[0].secondLevelInfo.map((item: any) => item.sName),
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          show: true,
          interval: 0,
          formatter: function (value: any) {
            var ret = '' //拼接加\n返回的类目项
            var maxLength = 6 //每项显示文字个数
            var valLength = value.length //X轴类目项的文字个数
            var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
            if (rowN > 1) {
              //如果类目项的文字大于5,
              for (var i = 0; i < rowN; i++) {
                var temp = '' //每次截取的字符串
                var start = i * maxLength //开始截取的位置
                var end = start + maxLength //结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + '\n'
                ret += temp //凭借最终的字符串
              }
              return ret
            } else {
              return value
            }
          },
          color: '#999'
        }
      }
    ],
    yAxis: {
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        formatter: '{value}分',
        color: '#999'
      }
    },
    series: [
      {
        name: '分值',
        type: 'bar',
        showBackground: true,
        barWidth: '20%',
        tooltip: {
          trigger: 'item'
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' }
            ])
          }
        },
        data: zhudongData.value[0].secondLevelInfo.map((item: any) => Number(item.sScore))
      }
    ]
  }
  zhudongEcharts.value.setOption(option)
}
// 随销能力
const suixiaoData = ref<any>()
const suixiaoBox = ref('随销能力')
const suixiaoShow = ref(true)
const suixiaoEcharts = ref<any>()
const suixiaoEchartsRef = ref<HTMLElement>()
const initSuixiaoEcharts = () => {
  suixiaoEcharts.value = echarts.init(suixiaoEchartsRef.value as HTMLElement)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '20px',
      left: '35px',
      right: '20px'
    },
    xAxis: [
      {
        type: 'category',
        data: suixiaoData.value[0].secondLevelInfo.map((item: any) => item.sName),
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          show: true,
          interval: 0,
          formatter: function (value: any) {
            var ret = '' //拼接加\n返回的类目项
            var maxLength = 6 //每项显示文字个数
            var valLength = value.length //X轴类目项的文字个数
            var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
            if (rowN > 1) {
              //如果类目项的文字大于5,
              for (var i = 0; i < rowN; i++) {
                var temp = '' //每次截取的字符串
                var start = i * maxLength //开始截取的位置
                var end = start + maxLength //结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + '\n'
                ret += temp //凭借最终的字符串
              }
              return ret
            } else {
              return value
            }
          },
          color: '#999'
        }
      }
    ],
    yAxis: {
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        formatter: '{value}分',
        color: '#999'
      }
    },
    series: [
      {
        name: '分值',
        type: 'bar',
        showBackground: true,
        barWidth: '20%',
        tooltip: {
          trigger: 'item'
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' }
            ])
          }
        },
        data: suixiaoData.value[0].secondLevelInfo.map((item: any) => Number(item.sScore))
      }
    ]
  }
  suixiaoEcharts.value.setOption(option)
}
// 学习能力
const xuexiData = ref<any>()
const xuexiBox = ref('学习能力')
const xuexiShow = ref(true)
const xuexiEcharts = ref<any>()
const xuexiEchartsRef = ref<HTMLElement>()
const initXuexiEcharts = () => {
  xuexiEcharts.value = echarts.init(xuexiEchartsRef.value as HTMLElement)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '20px',
      left: '35px',
      right: '20px'
    },
    xAxis: [
      {
        type: 'category',
        data: xuexiData.value[0].secondLevelInfo.map((item: any) => item.sName),
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          show: true,
          interval: 0,
          formatter: function (value: any) {
            var ret = '' //拼接加\n返回的类目项
            var maxLength = 6 //每项显示文字个数
            var valLength = value.length //X轴类目项的文字个数
            var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
            if (rowN > 1) {
              //如果类目项的文字大于5,
              for (var i = 0; i < rowN; i++) {
                var temp = '' //每次截取的字符串
                var start = i * maxLength //开始截取的位置
                var end = start + maxLength //结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + '\n'
                ret += temp //凭借最终的字符串
              }
              return ret
            } else {
              return value
            }
          },
          color: '#999'
        }
      }
    ],
    yAxis: {
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        formatter: '{value}分',
        color: '#999'
      }
    },
    series: [
      {
        name: '分值',
        type: 'bar',
        showBackground: true,
        barWidth: '20%',
        tooltip: {
          trigger: 'item'
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' }
            ])
          }
        },
        data: xuexiData.value[0].secondLevelInfo.map((item: any) => Number(item.sScore))
      }
    ]
  }
  xuexiEcharts.value.setOption(option)
}
// 通栏卡片数据请求
const getZongHeData = async () => {
  const params = {
    sqlId: 'engineerProfile.getChart',
    sqlParam: JSON.stringify({
      uId: route.query.userId || stores.huaxiangInfo?.userId,
      createTime: timeFormat(monthInfo.value).YYYYMM
    }),
    pagination: false,
    dbName: 'doris',
    debug: 0,
    page: 1,
    rows: 2
  }
  await getFirstLevelInfoApi(params).then((res: any) => {
    // console.log(res.rows)
    if (res.rows.length > 0) {
      jiaofuData.value = res.rows.filter((item: any) => item.fName === '交付能力')
      baozhangData.value = res.rows.filter((item: any) => item.fName === '保障能力')
      zhudongData.value = res.rows.filter((item: any) => item.fName === '主动维护能力')
      suixiaoData.value = res.rows.filter((item: any) => item.fName === '随销能力')
      xuexiData.value = res.rows.filter((item: any) => item.fName === '学习能力')
    } else {
      jiaofuData.value = []
      baozhangData.value = []
      zhudongData.value = []
      suixiaoData.value = []
      xuexiData.value = []
    }
  })
}

const dataTabBtn = (info: string, box: any) => {
  if (box === '交付能力') {
    jiaofuShow.value = !jiaofuShow.value
    if (jiaofuData.value.length === 0) return
    if (info === '图表展示') {
      nextTick(() => {
        initJiaofuEcharts()
      })
    }
  } else if (box === '保障能力') {
    baozhangShow.value = !baozhangShow.value
    if (baozhangData.value.length === 0) return
    if (info === '图表展示') {
      nextTick(() => {
        initBaozhangEcharts()
      })
    }
  } else if (box === '主动维护能力') {
    zhudongShow.value = !zhudongShow.value
    if (zhudongData.value.length === 0) return
    if (info === '图表展示') {
      nextTick(() => {
        initZhudongEcharts()
      })
    }
  } else if (box === '随销能力') {
    suixiaoShow.value = !suixiaoShow.value
    if (suixiaoData.value.length === 0) return
    if (info === '图表展示') {
      nextTick(() => {
        initSuixiaoEcharts()
      })
    }
  } else if (box === '学习能力') {
    xuexiShow.value = !xuexiShow.value
    if (xuexiData.value.length === 0) return
    if (info === '图表展示') {
      nextTick(() => {
        initXuexiEcharts()
      })
    }
  }
}

const detailsBtn = (info: string, fid: string) => {
  if (info === '交付能力') {
    fromInfo.value.fId = fid
    fromInfo.value.title = info
    isShow.value = true
    // console.log(fromInfo.value)
  }
  if (info === '保障能力') {
    fromInfo.value.fId = fid
    fromInfo.value.title = info
    isShow.value = true
  }
  if (info === '主动维护能力') {
    fromInfo.value.fId = fid
    fromInfo.value.title = info
    isShow.value = true
  }
  if (info === '随销能力') {
    fromInfo.value.fId = fid
    fromInfo.value.title = info
    isShow.value = true
  }
  if (info === '学习能力') {
    fromInfo.value.fId = fid
    fromInfo.value.title = info
    isShow.value = true
  }
}

onMounted(() => {
  if (route.query.userId) {
    stores.setHuaxiangInfo(route.query)
  }
  // initScoreEcharts()
  getUserInfo()
  getScoreEchart()
  getZongHeData()
})
</script>
<template>
  <div class="HuaXiangBox">
    <el-scrollbar>
      <div class="topBox">
        <div class="topLeft">
          <el-card class="hrCardBox">
            <template #header>
              <div class="cardHeader">
                <!-- <svg-icon color="#0b7be2" className="iconBox" iconName="icon-tickets-fill"></svg-icon> -->
                <span>装维画像</span>
                <div class="month">
                  <el-date-picker
                    v-model="monthInfo"
                    :clearable="false"
                    type="month"
                    placeholder="请选择月份"
                    style="width: 180px"
                    @change="monthChange"
                  />
                </div>
              </div>
            </template>
            <div class="cardCon">
              <div class="l_base">
                <div class="avatar" :class="String(userInfo.sex) === '1' ? 'man' : 'woman'"></div>
                <p class="nameSex">
                  <span class="name">{{ userInfo.realName }}</span>
                  <svg-icon
                    className="iconBox"
                    :iconName="`icon-${String(userInfo.sex) === '1' ? 'nan' : 'nvxing'}`"
                  ></svg-icon>
                </p>
                <p class="ageEducation">
                  <el-tag type="primary">年龄: {{ userInfo.userAge }}</el-tag>
                  <el-tag type="primary" style="margin-left: 4px"
                    >学历: {{ userInfo.userDegree }}</el-tag
                  >
                  <el-tag type="primary" style="margin-left: 4px"
                    >工龄: {{ userInfo.seniority }}</el-tag
                  >
                </p>
                <p class="orderNum">
                  <span
                    ><label>竣工单量</label>{{ userInfo.compCount ? userInfo.compCount : 0 }}</span
                  >
                  <span style="margin-left: 10px"
                    ><label>在途单量</label>{{ userInfo.ztNum ? userInfo.ztNum : 0 }}</span
                  >
                </p>
              </div>
              <div class="r_more">
                <ul class="moreInfoList">
                  <li>
                    <p class="label">工号：</p>
                    <p class="value">{{ userInfo.loginName }}</p>
                  </li>
                  <!-- <li>
                    <p class="label">工龄：</p>
                    <el-tooltip effect="dark" content="0.16" placement="top">
                      <p class="value">0.16</p>
                    </el-tooltip>
                  </li> -->
                  <li>
                    <p class="label">入职时间：</p>
                    <p class="value">
                      {{ userInfo.hireTime ? userInfo.hireTime : '暂无此项信息' }}
                    </p>
                  </li>
                  <li>
                    <p class="label">身份证号：</p>
                    <p class="value">{{ userInfo.idNumber }}</p>
                  </li>
                  <li>
                    <p class="label">本地网：</p>
                    <p class="value">
                      {{ userInfo.areaName ? userInfo.areaName : '暂无此项信息' }}
                    </p>
                  </li>
                  <li>
                    <p class="label">分局：</p>
                    <p class="value">{{ userInfo.fjName ? userInfo.fjName : '暂无此项信息' }}</p>
                  </li>
                  <li>
                    <p class="label">支局：</p>
                    <el-tooltip
                      v-if="userInfo.zjName"
                      effect="dark"
                      :content="userInfo.zjName"
                      placement="top"
                    >
                      <p class="value">{{ userInfo.zjName }}</p>
                    </el-tooltip>
                    <p v-else class="value">暂无此项信息</p>
                  </li>
                  <li>
                    <p class="label">网格：</p>
                    <el-tooltip
                      v-if="userInfo.wgName"
                      effect="dark"
                      :content="userInfo.wgName"
                      placement="top"
                    >
                      <p class="value">{{ userInfo.wgName }}</p>
                    </el-tooltip>
                    <p v-else class="value">暂无此项信息</p>
                  </li>
                  <li>
                    <p class="label">所属机构：</p>
                    <el-tooltip
                      v-if="userInfo.companyName"
                      effect="dark"
                      :content="userInfo.companyName"
                      placement="top"
                    >
                      <p class="value">暂无此项信息</p>
                    </el-tooltip>
                    <p v-else class="value">暂无此项信息</p>
                  </li>
                  <li>
                    <p class="label">责任区：</p>
                    <el-tooltip
                      v-if="userInfo.zrqName"
                      effect="dark"
                      :content="userInfo.zrqName"
                      placement="top"
                    >
                      <p class="value">{{ userInfo.zrqName }}</p>
                    </el-tooltip>
                    <p v-else class="value">暂无此项信息</p>
                  </li>
                  <li>
                    <p class="label">电工证编号：</p>
                    <el-tooltip
                      v-if="userInfo.elecNo"
                      effect="dark"
                      :content="userInfo.elecNo"
                      placement="top"
                    >
                      <p class="value">{{ userInfo.elecNo }}</p>
                    </el-tooltip>
                    <p v-else class="value">暂无此项信息</p>
                  </li>
                  <li>
                    <p class="label">登高证编号：</p>
                    <el-tooltip
                      v-if="userInfo.heightNo"
                      effect="dark"
                      :content="userInfo.heightNo"
                      placement="top"
                    >
                      <p class="value">{{ userInfo.heightNo }}</p>
                    </el-tooltip>
                    <p v-else class="value">暂无此项信息</p>
                  </li>
                  <li>
                    <p class="label">角色属性：</p>
                    <el-tooltip
                      v-if="userInfo.userType"
                      effect="dark"
                      :content="userInfo.userType"
                      placement="top"
                    >
                      <p class="value">{{ userInfo.userType }}</p>
                    </el-tooltip>
                    <p v-else class="value">暂无此项信息</p>
                  </li>
                </ul>
              </div>
            </div>
          </el-card>
        </div>
        <div class="topRight">
          <el-card class="hrCardBox">
            <template #header>
              <div class="cardHeader">
                <!-- <svg-icon color="#0b7be2" className="iconBox" iconName="icon-tickets-fill"></svg-icon> -->
                <span>{{ cgtabInfo.title }}</span>
              </div>
            </template>
            <div class="cardCon">
              <el-button-group class="btnGroup">
                <el-button @click="cgtabBtn('综合得分')" :type="btnColor ? 'primary' : ''">
                  综合得分
                </el-button>
                <el-button @click="cgtabBtn('薪酬占比')" :type="btnColor ? '' : 'primary'">
                  薪酬占比
                </el-button>
              </el-button-group>
              <div v-show="btnColor && scoreShow" class="scoreBox" ref="scoreEchartsRef"></div>
              <el-empty v-show="btnColor && !scoreShow" class="scoreBox" description="暂无数据" />
              <!-- <div v-show="!btnColor" class="salaryBox" ref="salaryEchartsRef"></div> -->
              <el-empty v-show="!btnColor" class="salaryBox" description="暂无信息" />
            </div>
          </el-card>
        </div>
      </div>
      <!-- 交付能力 -->
      <el-card v-if="jiaofuData" class="hrCardBox rowCardBox">
        <template #header>
          <div class="cardHeader">
            <!-- <svg-icon color="#0b7be2" className="iconBox" iconName="icon-tickets-fill"></svg-icon> -->
            <span>交付能力</span>
            <span class="tip">(总分:100分,占综合得分比例:35%)</span>
            <el-button
              @click="detailsBtn(jiaofuBox, jiaofuData[0].fId)"
              link
              type="primary"
              style="font-size: 12px"
              >【查看详情】</el-button
            >
          </div>
        </template>
        <div class="cardCon">
          <el-button-group class="btnGroup">
            <el-button
              @click="dataTabBtn('数量展示', jiaofuBox)"
              :type="jiaofuShow ? 'primary' : ''"
            >
              数量展示
            </el-button>
            <el-button
              style="margin-left: 10px"
              @click="dataTabBtn('图表展示', jiaofuBox)"
              :type="jiaofuShow ? '' : 'primary'"
            >
              图表展示
            </el-button>
          </el-button-group>
          <!-- `/src/assets/images/${item.icon}.png` -->
          <template v-if="jiaofuData.length > 0">
            <div v-if="jiaofuShow" class="dataBox">
              <div class="itemInfo" v-for="item in jiaofuData[0].secondLevelInfo" :key="item.sId">
                <img class="image" :src="iconImage" alt="" />
                <div class="info">
                  <p class="name">
                    <span :title="item.sName" class="label">
                      {{ item.sName }}
                    </span>
                    <span class="sign" v-if="item.maxMinFlag === '2'">最低指标</span>
                    <span class="sign" v-if="item.maxMinFlag === '1'">最高指标</span>
                  </p>
                  <p class="value">
                    占比:{{ item.sProportion }} 分数:{{ item.sScore }}分 单量:{{ item.listCount }}单
                  </p>
                </div>
              </div>
            </div>
            <div v-else class="baozhangBox echartsBox" ref="jiaofuEchartsRef"></div>
          </template>
          <el-empty v-else class="scoreBox" description="暂无数据" />
        </div>
      </el-card>
      <!-- 保障能力 -->
      <el-card v-if="baozhangData" class="hrCardBox rowCardBox" style="margin-top: 20px">
        <template #header>
          <div class="cardHeader">
            <!-- <svg-icon color="#0b7be2" className="iconBox" iconName="icon-tickets-fill"></svg-icon> -->
            <span>保障能力</span>
            <span class="tip">(总分:100分,占综合得分比例:35%)</span>
            <el-button
              @click="detailsBtn(baozhangBox, baozhangData[0].fId)"
              link
              type="primary"
              style="font-size: 12px"
              >【查看详情】</el-button
            >
          </div>
        </template>
        <div class="cardCon">
          <el-button-group class="btnGroup">
            <el-button
              @click="dataTabBtn('数量展示', baozhangBox)"
              :type="baozhangShow ? 'primary' : ''"
            >
              数量展示
            </el-button>
            <el-button
              style="margin-left: 10px"
              @click="dataTabBtn('图表展示', baozhangBox)"
              :type="baozhangShow ? '' : 'primary'"
            >
              图表展示
            </el-button>
          </el-button-group>
          <!-- `/src/assets/images/${item.icon}.png` -->
          <template v-if="baozhangData.length > 0">
            <div v-if="baozhangShow" class="dataBox">
              <div class="itemInfo" v-for="item in baozhangData[0].secondLevelInfo" :key="item.sId">
                <img class="image" :src="iconImage" alt="" />
                <div class="info">
                  <p class="name">
                    <span :title="item.sName" class="label">
                      {{ item.sName }}
                    </span>
                    <span class="sign" v-if="item.maxMinFlag === '2'">最低指标</span>
                    <span class="sign" v-if="item.maxMinFlag === '1'">最高指标</span>
                  </p>
                  <p class="value">
                    占比:{{ item.sProportion }} 分数:{{ item.sScore }}分 单量:{{ item.listCount }}单
                  </p>
                </div>
              </div>
            </div>
            <div v-else class="baozhangBox echartsBox" ref="baozhangEchartsRef"></div>
          </template>
          <el-empty v-else class="scoreBox" description="暂无数据" />
        </div>
      </el-card>
      <!-- 主动维护能力 -->
      <el-card v-if="zhudongData" class="hrCardBox rowCardBox" style="margin-top: 20px">
        <template #header>
          <div class="cardHeader">
            <!-- <svg-icon color="#0b7be2" className="iconBox" iconName="icon-tickets-fill"></svg-icon> -->
            <span>主动维护能力</span>
            <span class="tip">(总分:100分,占综合得分比例:10%)</span>
            <el-button
              @click="detailsBtn(zhudongBox, zhudongData[0].fId)"
              link
              type="primary"
              style="font-size: 12px"
              >【查看详情】</el-button
            >
          </div>
        </template>
        <div class="cardCon">
          <el-button-group class="btnGroup">
            <el-button
              @click="dataTabBtn('数量展示', zhudongBox)"
              :type="zhudongShow ? 'primary' : ''"
            >
              数量展示
            </el-button>
            <el-button
              style="margin-left: 10px"
              @click="dataTabBtn('图表展示', zhudongBox)"
              :type="zhudongShow ? '' : 'primary'"
            >
              图表展示
            </el-button>
          </el-button-group>
          <!-- `/src/assets/images/${item.icon}.png` -->
          <template v-if="zhudongData.length > 0">
            <div v-if="zhudongShow" class="dataBox">
              <div class="itemInfo" v-for="item in zhudongData[0].secondLevelInfo" :key="item.sId">
                <img class="image" :src="iconImage" alt="" />
                <div class="info">
                  <p class="name">
                    <span :title="item.sName" class="label">
                      {{ item.sName }}
                    </span>
                    <span class="sign" v-if="item.maxMinFlag === '2'">最低指标</span>
                    <span class="sign" v-if="item.maxMinFlag === '1'">最高指标</span>
                  </p>
                  <p class="value">
                    占比:{{ item.sProportion }} 分数:{{ item.sScore }}分 单量:{{ item.listCount }}单
                  </p>
                </div>
              </div>
            </div>
            <div v-else class="baozhangBox echartsBox" ref="zhudongEchartsRef"></div>
          </template>
          <el-empty v-else class="scoreBox" description="暂无数据" />
        </div>
      </el-card>
      <!-- 随销能力 -->
      <el-card v-if="suixiaoData" class="hrCardBox rowCardBox" style="margin-top: 20px">
        <template #header>
          <div class="cardHeader">
            <!-- <svg-icon color="#0b7be2" className="iconBox" iconName="icon-tickets-fill"></svg-icon> -->
            <span>随销能力</span>
            <span class="tip">(总分:100分,占综合得分比例:10%)</span>
            <el-button
              @click="detailsBtn(suixiaoBox, suixiaoData[0].fId)"
              link
              type="primary"
              style="font-size: 12px"
              >【查看详情】</el-button
            >
          </div>
        </template>
        <div class="cardCon">
          <el-button-group class="btnGroup">
            <el-button
              @click="dataTabBtn('数量展示', suixiaoBox)"
              :type="suixiaoShow ? 'primary' : ''"
            >
              数量展示
            </el-button>
            <el-button
              style="margin-left: 10px"
              @click="dataTabBtn('图表展示', suixiaoBox)"
              :type="suixiaoShow ? '' : 'primary'"
            >
              图表展示
            </el-button>
          </el-button-group>
          <!-- `/src/assets/images/${item.icon}.png` -->
          <template v-if="suixiaoData.length > 0">
            <div v-if="suixiaoShow" class="dataBox">
              <div class="itemInfo" v-for="item in suixiaoData[0].secondLevelInfo" :key="item.sId">
                <img class="image" :src="iconImage" alt="" />
                <div class="info">
                  <p class="name">
                    <span :title="item.sName" class="label">
                      {{ item.sName }}
                    </span>
                    <span class="sign" v-if="item.maxMinFlag === '2'">最低指标</span>
                    <span class="sign" v-if="item.maxMinFlag === '1'">最高指标</span>
                  </p>
                  <p class="value">
                    占比:{{ item.sProportion }} 分数:{{ item.sScore }}分 单量:{{ item.listCount }}单
                  </p>
                </div>
              </div>
            </div>
            <div v-else class="baozhangBox echartsBox" ref="suixiaoEchartsRef"></div>
          </template>
          <el-empty v-else class="scoreBox" description="暂无数据" />
        </div>
      </el-card>
      <!-- 学习能力 -->
      <el-card v-if="xuexiData" class="hrCardBox rowCardBox" style="margin-top: 20px">
        <template #header>
          <div class="cardHeader">
            <!-- <svg-icon color="#0b7be2" className="iconBox" iconName="icon-tickets-fill"></svg-icon> -->
            <span>学习能力</span>
            <span class="tip">(总分:100分,占综合得分比例:10%)</span>
            <el-button
              @click="detailsBtn(xuexiBox, xuexiData[0].fId)"
              link
              type="primary"
              style="font-size: 12px"
              >【查看详情】</el-button
            >
          </div>
        </template>
        <div class="cardCon">
          <el-button-group class="btnGroup">
            <el-button @click="dataTabBtn('数量展示', xuexiBox)" :type="xuexiShow ? 'primary' : ''">
              数量展示
            </el-button>
            <el-button
              style="margin-left: 10px"
              @click="dataTabBtn('图表展示', xuexiBox)"
              :type="xuexiShow ? '' : 'primary'"
            >
              图表展示
            </el-button>
          </el-button-group>
          <!-- `/src/assets/images/${item.icon}.png` -->
          <template v-if="xuexiData.length > 0">
            <div v-if="xuexiShow" class="dataBox">
              <div class="itemInfo" v-for="item in xuexiData[0].secondLevelInfo" :key="item.sId">
                <img class="image" :src="iconImage" alt="" />
                <div class="info">
                  <p class="name">
                    <span :title="item.sName" class="label">
                      {{ item.sName }}
                    </span>
                    <span class="sign" v-if="item.maxMinFlag === '2'">最低指标</span>
                    <span class="sign" v-if="item.maxMinFlag === '1'">最高指标</span>
                  </p>
                  <p class="value">
                    占比:{{ item.sProportion }} 分数:{{ item.sScore }}分 单量:{{ item.listCount }}单
                  </p>
                </div>
              </div>
            </div>
            <div v-else class="baozhangBox echartsBox" ref="xuexiEchartsRef"></div>
          </template>
          <el-empty v-else class="scoreBox" description="暂无数据" />
        </div>
      </el-card>
    </el-scrollbar>
  </div>
  <detailsBox v-if="isShow" v-model:is-show="isShow" :fromInfo="fromInfo"></detailsBox>
</template>

<style scoped lang="less">
.HuaXiangBox {
  padding: 8px;
  height: calc(100vh - 150px);
  :deep(.hrCardBox) {
    border-radius: unset;
    box-shadow: none;
    .el-card__header {
      padding: 0 8px;
      height: 48px;
      line-height: 48px;
      .month {
        float: right;
      }
    }
    .el-card__body {
      padding: 8px;
      height: 252px;
    }
  }
  :deep(.rowCardBox) {
    .cardHeader {
      .tip {
        padding-left: 10px;
        font-size: 12px;
      }
    }
    .el-card__body {
      height: auto !important;
    }
    .cardCon {
      height: auto !important;
      .dataBox {
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 10px;
        .itemInfo {
          display: flex;
          align-items: center;
          padding: 8px 12px;
          background-color: #f8fbff;
          .image {
            width: 52px;
            height: 52px;
            margin-right: 10px;
            // background: url(../../../assets/images/icon-ability_1.png) no-repeat center;
            // background-size: 101% 101%;
            // border-radius: 50%;
          }
          .info {
            .name {
              font-size: 16px;
              .sign {
                font-size: 14px;
                color: #ff4d53;
              }
              .label {
                max-height: 44px;
                line-height: 22px;
                color: #4e5969;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                line-clamp: clamp(0, 2, 2);
              }
            }
            .value {
              font-family: DIN-Medium;
              line-height: 36px;
              font-size: 14px;
              color: #007aff;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }
      .echartsBox {
        height: 300px;
      }
    }
  }
}
.topBox {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 20px;
  // height: 310px;
  .topLeft {
    flex: 1;
    .cardCon {
      display: flex;
      justify-content: space-between;
      align-items: start;
      text-align: center;
      .l_base {
        width: 25%;
        .avatar {
          width: 120px;
          height: 120px;
          margin: 0 auto;
          border-radius: 50%;
          &.man {
            background: url(../../../assets/images/avatarMan.png) no-repeat center;
            background-size: cover;
          }
          &.woman {
            background: url(../../../assets/images/avatarWoman.png) no-repeat center;
            background-size: cover;
          }
        }
        .nameSex {
          font-size: 16px;
          margin-bottom: 10px;
        }
        .ageEducation {
          margin-bottom: 10px;
        }
        .orderNum {
          color: #007aff;
          font-size: 16px;
          label {
            font-size: 12px;
            margin-right: 4px;
            color: #4e5969;
          }
        }
      }
      .r_more {
        width: 75%;
        .moreInfoList {
          display: flex;
          flex-wrap: wrap;
          li {
            width: 33.33%;
            padding: 8px;
            list-style-type: none;
            text-align: left;
            .label {
              font-size: 14px;
              color: #86909c;
            }
            .value {
              font-size: 14px;
              color: #1d2129;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
  .topRight {
    width: 560px;
    margin-left: 10px;
    .cardCon {
      position: relative;
      height: 100%;
      .scoreBox,
      .salaryBox {
        height: 100%;
      }
      .btnGroup {
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 999;
        .el-button {
          padding: 2px 8px;
        }
      }
    }
  }
}
</style>
